<template>
	<view :class="{'loading-box': true, 'fixed':fixed}">
	  <view class="loading-wrapper">
	    <view class="loading">
	      <view class="ball ball1"></view>
	      <view class="ball ball2"></view>
	      <view class="ball ball3"></view>
	      <view class="ball ball4"></view>
	      <view class="ball ball5"></view>
	    </view>
	  </view>
	  <view class="text" v-if="label"><label class="wait-dot">Loading . . . </label></view>
	</view>

</template>

<script>
	export default {
		props:{
			label: {
			  type: Boolean,
			  default: false
			},
			fixed: {
			  type: Boolean,
			  default: true
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	
	.loading-box{
	  position: relative;
	  width: 100%;
	}
	.fixed{
	  position: fixed;
	  height: 100%;
	  top:0;
	  left:0;
	  z-index: 3;
	}
	.loading-wrapper{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}
	.loading-box .text{
	  position: absolute;
	  bottom: 0;
	  color: #e6e6e6;
	  left: 50%;
	  top: 50%;
	  height: 40upx;
	  line-height: 40upx;
	  transform: translate(-50%, -50%);
	  text-align: left;
	  width: 120upx;
	  padding-top: 120upx;
	
	}
	.loading-box .text .wait-dot{
	  display: inline-block;
	  width: 100upx;
	  height: 40upx;
	  font-size: 20upx;
	  overflow: hidden;
	  animation:loading-text 2s linear infinite;
	}
	.loading{
	  height: 60upx;
	  animation:loading 1s linear infinite;
	  border-radius: 50%;
	  position: relative;
	}
	
	.loading .ball{
	  position: absolute;
	  top: 0;
	  width: 100%;
	  height: 100%;
		animation-delay:-1.5s
	}
	.ball1{
	  transform: rotate(0deg) translateY(-50%);
	  z-index: 5;
	}
	.ball2{
	  transform: rotate(72deg) translateY(-50%);
	  z-index: 4;
	}
	.ball3{
	  transform: rotate(144deg) translateY(-50%);
	  z-index: 3;
	}
	.ball4{
	  transform: rotate(216deg) translateY(-50%);
	  z-index: 2;
	}
	.ball5{
	  transform: rotate(288deg) translateY(-50%);
	  z-index: 1;
	}
	.ball::after{
	  content: '';
	  display: block;
	  width: 20upx;
	  height: 20upx;
	  margin-top: -10upx;
	  margin-left: -10upx;
	  border-radius: 50%;
		position:absolute;
	  top: 50%;
	  left: 50%;
	}
	.ball1::after{
	  background: #feba78;
	}
	.ball2::after{
	  background: #a78afb;
	}
	.ball3::after{
	  background: #74acf1; 
	}
	.ball4::after{
	  background: #a1e383;
	}
	.ball5::after{
	  background: #fc6fa8;
	}
	/* .ball1{
	  top: 8.35303662109375%;
	  left: 50%;
	  background: #feba78;
	}
	.ball2{
	  top: 40.1707642578125%;
	  left: 93.62627138671875%;
	  background: #a78afb;
	}
	.ball3{
	  top: 91.64686337890625%;
	  left: 76.9620697265625%;
	  background: #74acf1; 
	}
	.ball4{
	  top: 91.64686337890625%;
	  left: 23.035931640625%;
	  background: #a1e383;
	}
	.ball5{
	  top: 40.1707642578125%;
	  left: 6.3736287109375%;
	  background: #fc6fa8;
	} */
	
	@keyframes loading {
	  0%{
	    transform:rotate(0deg);
	    height: 60upx;
	  }
	  25%{
	    transform:rotate(0deg);
	    height: 0upx;
	  }
	  50% {
	    transform:rotate(0deg);
	    height: 60upx;
	  }
	  60%{
	    height: 50upx;
	  }
	  70% {
	    height: 60upx;
	  }
	  80%{
	    height: 50upx;
	  }
	  90% {
	    height: 60upx;
	  }
	  100% {
	    transform:rotate(360deg);
	    height: 60upx;
	  }
	  
	}
	
	@keyframes loading-text {
	  0%{
	    width:80upx;
	  }
	  25% {
	    width: 90upx;
	  }
	  50% {
	    width: 100upx;
	  }
	  75% {
	    width: 110upx;
	  }
	  100%{
	    width: 120upx;
	  }
	}
	

</style>
